import React, { useEffect } from 'react'
import backImg from "@/assets/images/back.png"
import { useNavigate } from 'react-router-dom';



export default function HeadBack(props) {

    const navigate = useNavigate();

    let backBoxStyle = {
        width: "100%",
        padding: "0 0.4rem",
        boxSizing: "border-box",
        height: "1.11rem",
        background: props.background,
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        fontFamily: "Medium",
        position: "fixed",
        left: 0,
        top: 0,
        zIndex: 3,
        display: "none"
    }

    const backIconBox = {
        width: "0.69rem",
        height: "0.69rem",
        lineHeight: 0
    }

    const backIcon = {
        width: "0.69rem",
        height: "0.69rem"
    }

    const backTit = {
        width: "4.47rem",
        height: "0.69rem",
        lineHeight: "0.69rem",
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
        textAlign: "center",
        fontSize: "0.33rem",
        color: "#000000"
    }

    const goBackPage = () => {
        if(props.isHome === "home") {
            const u = navigator.userAgent;
            try {
                if ((u.indexOf('Android') > -1 || u.indexOf('Linux')) > -1) {
                    window.company.jumpToMyTab();
                } else if (u.indexOf('iPhone') > -1) {
                    window.webkit.messageHandlers.jumpToMyTab.postMessage(null);
                }
            } catch (err) {
                console.log("throw an exception! maybe is not real mobile,error: " + err);
            }
        } else {
            navigate(-1);
        }
    }

    useEffect(() => {
        window.goBack = goBackPage;
    }, [])
    return (
        <>
            <div style={backBoxStyle}>
                <div style={backIconBox} onClick={goBackPage}>
                    <img style={backIcon} src={backImg} alt='' />
                </div>
                <div style={backTit}>{props.backTit}</div>
                <div style={backIconBox}></div>
            </div>
        </>
    )
}
